<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					广告名称:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					广告id:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					状态:
					<el-select v-model="state" clearable placeholder="全部" style="width: 200px;">
						<el-option value="ok" label="投放中"></el-option>
						<el-option value="PROJECT_OFFLINE_BUDGET" label="项目超出预算"></el-option>
						<el-option value="PROJECT_PREOFFLINE_BUDGET" label="项目接近预算"></el-option>
						<el-option value="TIME_NO_REACH" label="未到达投放时间"></el-option>
						<el-option value="TIME_DONE" label="已完成"></el-option>
						<el-option value="OK" label="投放中"></el-option>
						<el-option value="AUDIT" label="新建审核中"></el-option>
						<el-option value="NO_SCHEDULE" label="不在投放时段"></el-option>
						<el-option value="REAUDIT" label="修改审核中"></el-option>
						<el-option value="FROZEN" label="已终止"></el-option>
						<el-option value="AUDIT_DENY" label="审核不通过"></el-option>
						<el-option value="OFFLINE_BUDGET" label="广告超出预算"></el-option>
						<el-option value="OFFLINE_BALANCE" label="账户余额不足"></el-option>
						<el-option value="PREOFFLINE_BUDGET" label="广告接近预算"></el-option>
						<el-option value="DISABLED" label="已暂停"></el-option>
						<el-option value="PROJECT_DISABLED" label="已被项目暂停"></el-option>
						<el-option value="LIVE_ROOM_OFF" label="关联直播间不可投"></el-option>
						<el-option value="PRODUCT_OFFLINE" label="关联商品不可投"></el-option>
						<el-option value="AWEME_ACCOUNT_DISABLED" label="关联抖音账号不可投"></el-option>
						<el-option value="AWEME_ANCHOR_DISABLED" label="锚点不可投"></el-option>
						<el-option value="DISABLE_BY_QUOTA" label="已暂停（配额达限)"></el-option>
					</el-select>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
			</el-row>
		</div>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto">
			<el-table-column property="advertisingId" label="广告Id">
			</el-table-column>
			<el-table-column property="name" label="广告名称">
			</el-table-column>
			<el-table-column property="projectId" label="项目id">
			</el-table-column>
			<el-table-column property="creationTime" label="创建时间">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-button type="success" plain v-if="scope.row.state=='ok'">投放中</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='PROJECT_OFFLINE_BUDGET'">项目超出预算</el-button>
					<el-button type="warning" plain
						v-if="scope.row.state=='PROJECT_PREOFFLINE_BUDGET'">项目接近预算</el-button>
					<el-button type="warning" plain v-if="scope.row.state=='TIME_NO_REACH'">未到达投放时间</el-button>
					<el-button type="success" plain v-if="scope.row.state=='TIME_DONE'">已完成</el-button>
					<el-button type="success" plain v-if="scope.row.state=='OK'">投放中</el-button>
					<el-button type="warning" plain v-if="scope.row.state=='AUDIT'">新建审核中</el-button>
					<el-button type="warning" plain v-if="scope.row.state=='NO_SCHEDULE'">不在投放时段</el-button>
					<el-button type="warning" plain v-if="scope.row.state=='REAUDIT'"> 修改审核中</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='FROZEN'">已终止</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='AUDIT_DENY'">审核不通过</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='OFFLINE_BUDGET'">广告超出预算</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='OFFLINE_BALANCE'">账户余额不足</el-button>
					<el-button type="warning" plain v-if="scope.row.state=='PREOFFLINE_BUDGET'">广告接近预算</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='DISABLED'">已暂停</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='PROJECT_DISABLED'">已被项目暂停</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='LIVE_ROOM_OFF'">关联直播间不可投</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='PRODUCT_OFFLINE'">关联商品不可投</el-button>
					<el-button type="danger" plain
						v-if="scope.row.state=='AWEME_ACCOUNT_DISABLED'">关联抖音账号不可投</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='AWEME_ANCHOR_DISABLED'">锚点不可投</el-button>
					<el-button type="danger" plain v-if="scope.row.state=='DISABLE_BY_QUOTA'">已暂停（配额达限）</el-button>
				</template>
			</el-table-column>
			<el-table-column property="budget" label="预算">
			</el-table-column>
			<el-table-column property="bid" label="出价">
			</el-table-column>
			<el-table-column property="consume" label="消耗">
			</el-table-column>
			<el-table-column property="conversion" label="转化数">
			</el-table-column>
			<el-table-column property="average" label="平均千次转化">
			</el-table-column>
			<el-table-column label="平均转化成本">
				<template slot-scope="scope">
					<span>{{(scope.row.consume/scope.row.conversion).toFixed(2)}}</span>
				</template>	
			</el-table-column>
			<el-table-column label="查看广告">
				<template slot-scope="scope">
					<el-button type="text" @click="openNewPage(scope.row.advertiserId,scope.row.advertisingId)">查看
						广告</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click="drawer = true,getOnes(scope.row.id)">查看详情</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="deletes(scope.row.id)">删除</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-drawer :visible.sync="drawer" body-style=0>
			<el-card>
				<el-row>
					<video :src="amsAdvertising.url" style="width: 200px; height: 400px;" controls></video>
				</el-row>
				<el-descriptions class="margin-top" title="基本信息" :column="2" direction="vertical">
					<el-descriptions-item label="广告名">{{amsAdvertising.name}}</el-descriptions-item>
					<el-descriptions-item label="广告id">{{amsAdvertising.advertisingId}}</el-descriptions-item>
					<el-descriptions-item label="资质名"><el-tag
							size="small">{{amsAdvertising.abbreviation}}</el-tag></el-descriptions-item>
					<el-descriptions-item label="账号名称">{{amsAdvertising.ename}}</el-descriptions-item>
					<el-descriptions-item label="标题" :span="2">{{amsAdvertising.title}}</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-drawer>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "qu",
		data() {
			return {
				state: '',
				id: '',
				drawer: false,
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				amsAdvertising: [],
				roleDescriptions: {

				}
			}
		},
		created() {
			let than = this
			this.$axios.post('amsAdvertising/pageList', qs.stringify({
				size: 10,
				current: 1
			})).then((res) => {
				than.advertisersList = res.data;
				console.log(than.advertisersList)
			})
		},
		methods: {
			deletes(id){
				this.$axios.post('amsAdvertising/delete',qs.stringify({id:id})).then((res) => {
					console.log(res.data)
				})
			},
			openNewPage(aid, pid) {
				window.open('https://ad.oceanengine.com/promotion/promote-manage/ad?aadvid=' + aid +
					'&filter_keyword=%2522' + pid + '%2522&filter_search_type=%25229%2522');
			},
			getOnes(id) {
				let than = this;
				this.$axios.post('amsAdvertising/getOnes', qs.stringify({
					id: id
				})).then((res) => {
					console.log(res.data)
					than.amsAdvertising = res.data;
					console.log(than.amsAdvertising)
				})
			},
			select() {
				this.$axios.post('umsAdvertisingUserType').then((res) => {
					console.log(res.data)
				})
			},
			viewAccount(id, name) {
				this.$router.push({
					name: 'advertisingUser',
					params: {
						accountId: id,
						name: name
					}
				});
			},
			handleSizeChange(val) {
				let that = this
				this.$axios.post('amsAdvertising/pageList', qs.stringify({
					size: val,
					current: 1,
					name: that.aName,
					id: that.aId,
					state:that.state
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('amsAdvertising/pageList', qs.stringify({
					size: that.advertisersList.size,
					current: val,
					name: that.aName,
					id: that.aId,
					state:that.state
				})).then((res) => {
					that.advertisersList = res.data;
				})
			},
			goToExternalUrl() {
				// 使用 window.location.href 跳转到外部 URL  
				window.location.href =
					'https://open.oceanengine.com/audit/oauth.html?app_id=1797546706202640&state=your_custom_params&scope=%5B300000000%2C2%2C4%2C5%2C9%2C130%2C110%2C112%2C14%2C120%2C122%2C123%2C124%2C100000005%5D&material_auth=1&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2F&rid=98ym2wdjps7'; // 外部 URL  
			},
			selectLike() {
				let that = this
				this.$axios.post('amsAdvertising/pageList', qs.stringify({
					size: 10,
					current: 1,
					name: that.aName,
					id: that.aId,
					state:that.state
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>